import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_application_1/components/sticky/sticky_header_delegate.dart';
import 'package:flutter_application_1/components/sticky/sticky_tabbar_delegate.dart';
import 'package:flutter_application_1/utils/source_utils.dart';
import 'package:flutter_application_1/utils/utils.dart';

class NestedScrollTabbar extends StatefulWidget {
  @override
  _NestedScrollTabbarState createState() => _NestedScrollTabbarState();
}

class _NestedScrollTabbarState extends State<NestedScrollTabbar> {
  List<String> _tabList = ['one', 'two'];

  @override
  void dispose() {
    super.dispose();
    Utils.updateStatusBarStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarIconBrightness: Brightness.light,
      ),
      child: Scaffold(
        body: DefaultTabController(
          length: _tabList.length,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                // 导航栏
                // SliverAppBar(
                //   title: Text('嵌套列表中简单使用tabbar'),
                //   centerTitle: true,
                //   pinned: true,
                //   expandedHeight: 230,
                //   flexibleSpace: FlexibleSpaceBar(
                //     background: ExtendedImage.asset(
                //       ImageUtils.wrapAssets('bg-1.jpg'),
                //       fit: BoxFit.fill,
                //     ),
                //   ),
                //   bottom: TabBar(
                //     indicatorColor: Colors.white,
                //     tabs: _tabList
                //         .map(
                //           (name) => Tab(
                //             text: name,
                //           ),
                //         )
                //         .toList(),
                //   ),
                // ),
                // 粘性布局
                SliverPersistentHeader(
                  pinned: true,
                  delegate: StickyTabBarDelegate(
                    backgroundColor: Theme.of(context).primaryColor,
                    minTopHeight: Utils.topSafeHeight,
                    maxTopHeight: 230,
                    top: ExtendedImage.asset(
                      ImageUtils.wrapAssets('bg-1.jpg'),
                      fit: BoxFit.cover,
                      width: 750 * Utils.rpx,
                      height: 230,
                      alignment: Alignment.bottomCenter,
                    ),
                    tabbar: TabBar(
                      indicatorColor: Colors.white,
                      tabs: _tabList
                          .map(
                            (name) => Tab(
                              text: name,
                            ),
                          )
                          .toList(),
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: _tabList
                  .map(
                    (name) => TabBarViewBuilder(
                      name: name,
                    ),
                  )
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

class TabBarViewBuilder extends StatelessWidget {
  final String name;

  TabBarViewBuilder({
    Key? key,
    required this.name,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      key: PageStorageKey<String>('TabBarViewBuilder_$name'),
      slivers: [
        SliverPadding(
          padding: EdgeInsets.all(8),
          sliver: SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.centerLeft,
                  child: Text('item_$index'),
                );
              },
              childCount: 50,
            ),
          ),
        ),
      ],
    );
  }
}
